$(function() {
    var addIndex;
    var editIndex;
    // 加载layui的form模块
    var form = layui.form;
    // 获取文章列表并渲染
    renderCategory();

    function renderCategory() {
        $.ajax({
            url: "/my/article/cates",
            success: function(res) {
                if (res.status === 0) {
                    $("tbody").html(template("tpl-list", res));
                }
            },
        });
    }

    // 点击 添加类别,显示弹出层
    $("#showAdd").click(function() {
        addIndex = layer.open({
            type: 1,
            title: "添加文章类别",
            content: $("#tpl-add").html(),
            area: ["500px", "250"],
        });
    });

    // 实现添加类别
    // 必须使用事件委托，监听表单的提交事件
    $("body").on("submit", "#add-form", function(e) {
        e.preventDefault();
        // 获取表单数据
        var data = $(this).serialize();
        $.ajax({
            type: "post",
            url: "/my/article/addcates",
            data: data,
            success: function(res) {
                // 无论成功，都要提示
                layer.msg(res.message);
                if (res.status === 0) {
                    // 重新渲染列表
                    renderCategory();
                    // 关闭弹出层
                    layer.close(addIndex);
                }
            },
        });
    });

    // 删除类别
    $("body").on("click", ".delete", function() {
        var id = $(this).attr("data-id");
        layer.confirm("确定删除吗？", { icon: 3, title: "提示" }, function(index) {
            $.ajax({
                url: "/my/article/deletecate/" + id,
                success: function(res) {
                    layer.msg(res.message);
                    if (res.status === 0) {
                        renderCategory();
                    }
                },
            });
            layer.close(index);
        });
    });

    // 点击编辑，显示弹出层
    $("body").on("click", ".edit", function() {
        // 使用 h5 提供的 dataset 属性， 获取元素所有的 data - xxx 属性值
        var obj = this.dataset;
        // console.log(obj);
        editIndex = layer.open({
            type: 1,
            title: "编辑文章类别",
            content: $("#tpl-edit").html(),
            area: ["500px", "250px"],
            success: function() {
                form.val("abcd", JSON.parse(JSON.stringify(obj)));
            },
        });
    });

    // 编辑类别
    $("body").on("submit", "#edit-form", function(e) {
        e.preventDefault();
        // 得到一个数组，更容易修改
        var data = $(this).serializeArray();
        data[0].name = "Id";
        $.ajax({
            url: "/my/article/updatecate",
            type: "post",
            data: data,
            success: function(res) {
                layer.msg(res.message);
                layer.close(editIndex);
                if (res.status === 0) {
                    renderCategory();
                }
            },
        });
    });
});